<template>
  <div class="pnp-list">
    <div class="table-container">
      <Form class="search-container mb20" :label-width="50">
        <Row>
          <div class="single-page-title">用户列表</div>
          <Col span="7">
            <SearchInput :content.sync="searchForm.content" placeholder="请输入用户名称" @click-btn="search()" />
          </Col>
          <CDropdown class="pull-right" :button="moreOption.button" :list="moreOption.list"></CDropdown>
        </Row>
      </Form>
      <div class="relative">
        <Table
          ref="table"
          stripe
          :max-height="tableHeight"
          :data="page.list"
          :columns="columns"
          :loading="loading"
          :row-class-name="getRowClass"
          class="visible-table"
        />
        <div class="page-wrapper">
          <Page
            :total="page.total"
            :page-size="page.pageSize"
            :page-size-opts="page.pageSizeOption"
            :loading="loading"
            :current="page.pageNum"
            show-elevator
            show-sizer
            class="page-container"
            @on-change="getPage"
            @on-page-size-change="changePageSize"
          />
        </div>
      </div>
    </div>
    <div class="bottom-container">
      <div>共计<span class="red">{{page.list.length}}</span>个版本</div>
    </div>
    <div v-if="showEditModal">
      <VersionPublishEdit :show.sync="showEditModal" :data="tempItem" @ok="getPage(page.pageNum)" />
    </div>
    <div v-if="showValidModal">
      <PromoteModal :show.sync="showValidModal" @ok="changeStatus(tempItem, 1)">
        <div slot="body">
          将<span class="error-name">启用</span>版本<span class="error-name">{{tempItem.VersionName}}</span>，启用后新建任务可选择该版本，请确认。
        </div>
      </PromoteModal>
    </div>
    <div v-if="showInvalidModal">
      <PromoteModal :show.sync="showInvalidModal" @ok="changeStatus(tempItem, 2)">
        <div slot="body">
          将<span class="error-name">停用</span>版本<span class="error-name">{{tempItem.VersionName}}</span>，停用后已配置该版本的任务将自动取消且无法恢复，需重新发下任务，请确认。
        </div>
      </PromoteModal>
    </div>
    <div v-if="showRemarkModal">
      <ContentModal :show.sync="showRemarkModal" title="查看版本说明" :content="remark" />
    </div>
  </div>
</template>

<script>
import SearchInput from '@/components/common/SearchInput'
import CDropdown from '@/components/common/CDropdown'
import uuid from 'uuid'
import commonMixins from '@/mixins/common'
import VersionPublishEdit from '@/views/console/version/VersionPublishEdit'

export default {
  components: {
    VersionPublishEdit,
    SearchInput,
    CDropdown
  },
  mixins: [commonMixins],
  data () {
    let that = this

    return {
      searchForm: {},
      originForm: {},
      timeOption: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      showEditModal: false,
      showValidModal: false,
      showInvalidModal: false,
      showSqlListModal: false,
      showRemarkModal: false,
      tempId: null,
      tempItem: null,
      originColumns: [
        that.renderIndexCol(),
        {
          title: '账号',
          key: 'UserName'
        },
        {
          title: '名称',
          key: 'Name'
        },
        {
          title: '手机号',
          key: 'Mobile'
        },
        {
          title: '备注',
          key: 'Memo'
        },
        {
          title: '创建时间',
          key: 'CreateTime',
          align: 'center',
          windowWidth: 1200,
          render (h, param) {
            let row = param.row
            let date = row.CreateTime && that.dateUtil.getFormatTime(new Date(row.CreateTime * 1000))
            return h('div', date)
          }
        },
        {
          title: '状态',
          key: 'Status',
          width: 60,
          windowWidth: 800,
          render (h, param) {
            let value = param.row.Enable
            return h('span', {
              class: value === 2 ? 'red' : ''
            }, (value === 2 && '停用') || '有效')
          }
        },
        {
          title: '操作',
          width: 130,
          render (h, param) {
            let row = param.row
            return h('CDropdown', {
              props: {
                button: {},
                data: row,
                list: [
                  {
                    name: uuid(),
                    button: true,
                    text: '编辑',
                    callback: () => {
                      that.tempItem = row
                      that.showEditModal = true
                    }
                  },
                  {
                    name: uuid(),
                    button: true,
                    text: '启用',
                    callback: () => {
                      that.tempItem = row
                      that.showValidModal = true
                    }
                  },
                  {
                    name: uuid(),
                    button: true,
                    type: 'error',
                    text: '停用',
                    callback: () => {
                      that.tempItem = row
                      that.showInvalidModal = true
                    }
                  }
                ]
              }
            })
          }
        }
      ],
      columns: [],
      page: {
        key: 'user-list',
        pageNum: 1,
        idKey: 'uuid',
        // pageSize: this.util.pageValue('version-publish'),
        // pageSizeOption: that.util.getPagination(),
        pages: 0,
        total: 0,
        list: []
      },
      loading: false,
      moreOption: {
        button: {
          text: '批量操作',
          size: 'default'
        },
        list: [
          {
            name: uuid(),
            size: 'default',
            text: '新建版本',
            callback () {
              that.tempItem = null
              that.showEditModal = true
            }
          }
        ]
      },
      remark: '',
      totalSpace: 270,
      tableHeight: null,
      renderTable: true
    }
  },
  beforeMount () {
    this.copyForm({
      content: '',
      timeArr: []
    })
    // this.getPage(1)
  },
  methods: {
    getPage (pageNum = 1) {
      this.loading = true
      let page = this.page
      page.pageNum = pageNum
      let param = {
        PageSize: page.pageSize,
        Page: pageNum
      }

      let originForm = this.originForm
      param.Params = originForm.content.trim()

      const timeArr = originForm.timeArr
      if (timeArr.length) {
        let startTime = new Date(timeArr[0] + ' 00:00:00').getTime()
        let endTime = new Date(timeArr[1] + ' 23:59:59').getTime()

        endTime = endTime + 24 * 60 * 60 * 1000

        param.StartTime = startTime / 1000
        param.EndTime = endTime / 1000
      }

      page.list = []
      api.getVersionPublishPage(param).then(res => {
        this.loading = false
        let data = res.Data
        let list = data.SliceData || []

        page.list = list
        page.total = data.Total || 0
      }).catch(() => {
        this.loading = false
      })
    },
    changeStatus (item, Enable) {
      // this.loading = true
      // api.changeVersionPublishStatus({
      //   Id: item.Id,
      //   Enable
      // }).then(res => {
      //   this.loading = false
      //   this.tipUtil.success('操作成功')
      //   this.getPage(this.page.pageNum)
      // }).catch(() => {
      //   this.loading = false
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.date {
  width: 432px;
}
.bottom-container {
  position: absolute;
  height: 58px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  background: #fff;
  padding: 10px 0 10px 20px;
  border-top: 1px solid #ccc;
  z-index: 800;
  > div {
    float: left;
    line-height: 38px;
    &:not(:first-child) {
      margin-left: 20px;
    }
  }
}
</style>
